<script setup lang="ts">
import WelcomeBonusDet from './WelcomeBonusDet.vue';

const [setEle, eleBp] = useElementBreakpoint();
</script>

<template>
  <TCard :ref="setEle" class="px-0 text-center" :class="eleBp['6xl'] ? 'py-6' : '!py-3 '">
    <I18nT keypath="fJ8BxJq7KvP64puUebtCq" tag="div" class="px-2.5 text-7 font-600">
      <template #label>
        <span class="text-amber">{{ $t('efoNcLqwIEylHaLUt3yxs') }}</span>
      </template>
    </I18nT>
    <div class="m-[0_auto] mb-5 mt-3 max-w-900px px-2.5 text-3.5 text-sys-text-body">
      {{ $t('jiAyrNeUvlWrMUCsgn02') }}
    </div>
    <div class="welcome-banner-mobile">
      <WelcomeBonusDet class="w-full" :size="eleBp['6xl'] ? 'large' : 'small'" />
    </div>
  </TCard>
</template>

<style scoped lang="scss">
.welcome-banner-mobile {
  --uno: 'w-full overflow-x-auto';
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  } //IE 10+
  -ms-overflow-style: none !important; //Firefox
  overflow: -moz-scrollbars-none !important;
}
</style>
